<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../extjs_all/resources/css/ext-all.css"></link>
<script type="text/javascript" src="../../extjs_all/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../extjs_all/ext-all.js"></script>
<script type="text/javascript" src="../../extjs_all/source/locale/ext-lang-zh_CN.js"></script>
<!-- script type="text/javascript" src="../myext/PersonListGridPanel.js"></script> -->
<script type="text/javascript">
	Ext.onReady(function(){
		Ext.QuickTips.init();	//初始化Ext.QuickTips，以使得tip提示可用
		Ext.form.Field.prototype.msgTarget='side';		//提示后面显示图片标记
		
		MoneyEditGridPanel = Ext.extend(Ext.grid.EditorGridPanel,{
			typeCombo:null,
			insertdata:[],
			conn:new Ext.data.Connection(),
			constructor:function(){
				this['store']= new Ext.data.JsonStore({
					root:'list',
					totalProperty:'cnt',
					url:'finddatas.action',
			//	autoLoad:true,
					//data:[['收入',255],['收入',44],['支出',2],['收入',54]],
					fields:[{name:'id', type: 'int'},'type','value1']
				}),
				//定义一个ComboBox,以便后面都可以使用
				typeCombo = new Ext.form.ComboBox({
					triggerAction:'all',
					mode:'local',
					displayField:'type',
					width:50,
					value:'全部',
					listeners:{
						select:{	//用户触发select事件，调用对应的函数
							fn:this.onViewTypeSelect,
							scope:this
						}
					},
					store:new Ext.data.SimpleStore({
						data:['收入','支出','全部'],
						expandData:true,		//显示所有的数据
						fields:['type']
					})
				})
				MoneyEditGridPanel.superclass.constructor.call(this,{
					title:'123',
					renderTo:Ext.getBody(),
					width:600,
					height:400,
					sm:new Ext.grid.RowSelectionModel({
						singleSelect:true
					}),
					tbar:[{
						text:'保存',
						handler:this.saveButtonClick,
						scope:this
					},
					"-",{
						text:'插入',
						handler:this.insertButtonClick,
						scope:this
					},"-",{
						text:'删除',
						handler:this.deleteButtonClick,
						scope:this
					},
						"-",'查看方式',typeCombo
					],
					/* store:new Ext.data.JsonStore({
						root:'list',
						
						url:'finddatas.action',
						autoLoad:true,
						//data:[['收入',255],['收入',44],['支出',2],['收入',54]],
						fields:[{name:'id', type: 'int'},'type','value']
					}), */
					bbar:new Ext.PagingToolbar({
						pageSize:1,
						store:this.store,
						displayInfo:true,
						displayMsg:'第{0}条到{1}条，共{2}条',
						emptyMsg:'没有记录'
					}),
					columns:[{
						header:'类型',
						dataIndex:'type',
						editor:new Ext.form.ComboBox({
							triggerAction:'all',
							mode:'local',
							displayField:'type',
							store:new Ext.data.SimpleStore({
								data:['收入','支出'],
								expandData:true,
								fields:['type']
							})
						})
					},{
						header:'金额',
						dataIndex:'value1',
						editor:new Ext.form.NumberField({
							maxValue:1000000,
							minValue:1
						})
					}]
				});
				this.getStore().load({
					url:'finddatas.action'
					//params:{start:0,limit:2}
				});
			},
			onViewTypeSelect:function(combo){
				var type = combo.getValue();
				if(type == '全部'){
					this.store.clearFilter()
				}else{
					this.store.filter("type",type);
				}
			},
			//在EditGrid中插入一条数据，并在编辑的焦点设置在刚刚添加的数据上
			insertButtonClick:function(){
				var record = new Ext.data.Record({
					id:'',
					type:'',
					value:0
				});
				record.set('type','收入');
				record.set('value',1);
				this.store.add(record);
				this.insertdata.push(record);
				this.startEditing(this.store.getCount()-1,0);
			},
			saveButtonClick:function(){
				//获得修改的Records
				var modifiedRes = this.store.modified ;
				var temp = [];
				for(var i = 0 ; i < modifiedRes.length;i++){
					//alert(Ext.util.JSON.encode(modifiedRes[i].data));
					var data = {};
					for(var j in  modifiedRes[i].modified){
						data[j] = modifiedRes[i].get(j);
					}
					
					//Ext.apply的作用，相当于附加值，其中传递的参数意义：
					//参数1：是要拷贝的目标对象，参数2：是拷贝的源对象，参数：可选的，表示给目标对象提供一个默认值。
					temp.push(Ext.apply({id:modifiedRes[i].get('id')},data));
					//alert(Ext.util.JSON.encode(Ext.apply({id:modifiedRes[i].get('id')},Ext.apply({},modifiedRes[i].modified))));
				}
				for(var i =0;i<this.insertdata.length;i++){
					temp.push(this.insertdata[i].data);
				}
				//alert(Ext.util.JSON.encode(temp));
				Ext.Ajax.request({
					url:'savedata.action',
					params:{
						content:Ext.util.JSON.encode(temp)
					}/* ,
					 success : function(response){
						alert(response.responseText);
					}  */
					
				});
				Ext.Ajax.on('requestcomplete',this.requestFunction,this);
				this.store.commitChanges();
				this.onViewTypeSelect(typeCombo);
			//	this.store.load();
			},
			//在插入数据的时候,返回的ID需要重新加载到insertdata对象中,这样就同数据库一样了,根据ID可以修改和删除数据
			requestFunction:function(conn,response,options){
				var c = Ext.util.JSON.decode(response.responseText);
				var res = c.list;
				for(var i = 0;i<res.length;i++){
					var rc = res[i];
					var ss = new Ext.data.Record(rc)
					this.insertdata[i].set('id',ss.get('id'));
				}
				this.store.commitChanges();
				this.insertdata=[];
			},
			deleteButtonClick:function(){
				var selrs = this.getSelectionModel().getSelected();
				try{
					if( this.getSelectionModel().getCount() == 0){
						throw Error('请选择一条记录!');
					}
					Ext.Msg.confirm('提示','是否删除此数据?',function(btn){
						if(btn == 'yes'){
							this.getStore().remove(selrs);
						}
					},this);
					if(selrs.get('id')!=""){
						Ext.Ajax.request({
							url:'deldatadic.action',
							params:{
								'dataDict.id':selrs.get('id')
							}/* ,
							 success : function(response){
								alert(response.responseText);
							}  */
							
						});
						
					}else{
						//如果没有保存到数据库中,直接删除的话,那么需要在insertdata中将保存的数据清除
						this.insertdata.remove(selrs);
						this.store.modified.remove(selrs);
					}					
					//删除的时候,取消requestcomplete这个函数的调用
					Ext.Ajax.un('requestcomplete',this.requestFunction,this);
				}catch(err){
					Ext.Msg.alert('提示',err.description);
				}							
				
				
			}
		});
		new MoneyEditGridPanel();
	});
</script>
<title>Edit Grid</title>
</head>
<body>

</body>
</html>